<template>
  <p-modal v-model="visible" :width="500" :mask-closable="false" title="分配物料" @cancel="onCancel" @ok="onOk">
    <p-form-model ref="form" :model="model" :rules="rules" :label-col="{span: 6}" :wrapper-col="{span: 16}">
      <p-form-model-item label="物料编码" :style="{backgroundImage: `url(xxxxx)`}">
        <p-input :value="model.mcode" disabled />
      </p-form-model-item>
      <p-form-model-item label="物料名称">
        <p-input :value="model.mname" disabled />
      </p-form-model-item>
      <p-form-model-item label="可分配数量">
        <p-input :value="model.remainQuantitySelf" disabled />
      </p-form-model-item>
      <p-form-model-item prop="workstationCode" label="工站">
        <p-tree-select :value="model.workstationCode" :disabled="disabled" :tree-data="treeData" :dropdown-style="{maxHeight: '500px'}" tree-node-filter-prop="title" show-search tree-default-expand-all @change="onTreeChange" />
      </p-form-model-item>
      <p-form-model-item prop="stationsRequired" label="工站所需数量">
        <p-input-number v-model="model.stationsRequired" :precision="0" :min="0" :max="model.remainQuantitySelf" />
      </p-form-model-item>
      <p-form-model-item prop="maintenanceKey" label="是否关键物料">
        <p-select v-model="model.maintenanceKey">
          <p-select-option :value="1">是</p-select-option>
          <p-select-option :value="2">否</p-select-option>
        </p-select>
      </p-form-model-item>
    </p-form-model>
  </p-modal>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      required: true
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      replaceFields: {
        title: 'processmname',
        value: 'processmcode'
      },
      disabled: false,
      model: {
        mcode: '',
        mname: '',
        remainQuantitySelf: '',
        workstationCode: '',
        workstationName: '',
        stationsRequired: '',
        maintenanceKey: ''
      },
      rules: {
        workstationCode: {
          required: true,
          message: '请选择工站'
        },
        stationsRequired: {
          required: true,
          message: '请输入工站所需数量'
        },
        maintenanceKey: {
          required: true,
          message: '请选择是否是关键物料'
        }
      }
    }
  },
  computed: {
    treeData() {
      const data = []
      this.items.forEach(item => {
        const children = []
        item.children.forEach(child => {
          const items = []
          child.children.forEach(one => {
            items.push({
              title: one.processmname,
              value: one.processmcode
            })
          })
          
          children.push({
            disabled: true,
            title: child.processmname,
            value: child.processmcode,
            children: items
          })
        })
        data.push({
          disabled: true,
          title: item.processmname,
          value: item.processmcode,
          children
        })
      })
      return data
    }
  },
  watch: {
    value() {
      this.initValue()
    },
    visible(val) {
      if (!val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    this.initValue()
  },
  methods: {
    initValue() {
      this.visible = this.value
      if (this.value) {
        Object.assign(this.model, this.options)
        this.disabled = !!this.options.workstationCode
      }
    },
    onTreeChange(value, label) {
      this.model.workstationCode = value
      this.model.workstationName = label
    },
    onCancel() {
      this.$refs.form.resetFields()
    },
    onOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('callback', this.model)
          this.visible = false
        }
      });
    }
  }
}
</script>
